<template>
  <div class="login-container">
    <el-row>
      <!-- 左侧封面背景图 -->
      <el-col :span="14" class="left-bg" />
      <!-- 右侧登录表单 -->
      <el-col :span="10" class="right-form">
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="12">
            <!-- 表单 -->
            <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
              <!-- 标题 -->
              <h1>登录</h1>
              <!-- 用户名 -->
              <el-form-item prop="mobile">
                <el-input v-model="loginForm.mobile" placeholder="请输入手机号" />
              </el-form-item>
              <!-- 密码 -->
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" show-password placeholder="请输入密码" />
              </el-form-item>
              <!-- 用户协议 -->
              <el-form-item prop="isAgree">
                <el-checkbox v-model="loginForm.isAgree">
                  <el-link type="primary" :underline="false">用户平台使用协议</el-link>
                </el-checkbox>
              </el-form-item>
              <!-- 登录按钮 -->
              <el-form-item>
                <el-button type="primary" style="width: 100%" @click="onLogin">登录</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
const devLoginForm = {
  mobile: '13800000002', // 手机号
  password: `itHeiMa@${parseTime(new Date(), '{y}{m}{d}')}`, // 密码
  isAgree: true // 是否同意用户协议
}

// const proLoginForm = {
//   mobile: '', // 手机号
//   password: '', // 密码
//   isAgree: false // 是否同意用户协议
// }

export default {
  name: 'Login',
  data() {
    return {
      // 登录表单数据，为开发方便，开发环境自动填充用户名和密码
      // loginForm: process.env.NODE_ENV === 'development' ? devLoginForm : proLoginForm,
      loginForm: devLoginForm,
      // 登录表单验证规则
      loginRules: {
        // 手机号验证规则
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        // 密码验证规则
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            pattern: /^\S{6,16}$/,
            message: '密码必须为6-16位非空字符',
            trigger: 'blur'
          }
        ],
        // 是否同意用户协议验证规则
        isAgree: [
          {
            // 自定义验证规则
            validator(rule, value, callback) {
              value ? callback() : callback(new Error('请先同意用户协议'))
            }
          }
        ]
      }
    }
  },
  methods: {
    // 提交登录
    async onLogin() {
      // 进行表单验证
      this.$refs.loginRef.validate(async(isOk) => {
        // 验证成功
        if (isOk) {
          // 重新生成密码
          // this.loginForm.password = `itHeiMa@${parseTime(new Date(), '{y}{m}{d}')}`
          // 发生登录请求
          await this.$store.dispatch('user/login', this.loginForm)
          // 登录成功，跳转到首页
          this.$message.success('登录成功')
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  // 左侧封面背景图
  .left-bg {
    height: 100vh;
    background: url('../../assets/common/login_back.png') no-repeat center / cover;
    border-radius: 0 60px 60px 0;
  }
  // 右侧登录表单
  .right-form {
    height: 100vh;
    .el-row {
      width: 100%;
      height: 100%;
      padding-bottom: 80px;
      h1 {
        margin-bottom: 30px;
        font-size: 28px;
      }
    }
  }
}
</style>
